<template>
	<div class="mock-content">
		<div class="header">
			<div class="left">
				<img class="top_left" src="@/assets/logo-ielts.jpg" />
				<div>
					<div> 准考证号xxxxxx 【阅读】C17 {{state.paper.title}}</div>
					<div>55 minutes remaining</div>
				</div>
			</div>
			<div class="right">
				<el-button @click="submitPaper">finish section</el-button>
				<img class="image" src="@/assets/menu.png" />
				<img class="image" src="@/assets/note.png" />
			</div>
		</div>
		<template v-for="section in state.sectionList">
			<div v-show="section.id == state.sectionIndex" class="section-box">
				<div class="content-top">
					<div class="name">{{section.sectionName}}</div>
					<div class="demand" v-html="section.demand"></div>
				</div>
				<div class="content-box">
					<template v-if="state.paper.paperType !=1">
						<div class='left' ref="indexLeft"></div>
						<div class="resize" title="收缩侧边栏"></div>
					</template>
					<div :class="state.paper.paperType !=1?'right':''" ref="indexRight">
						<template v-for="exam in section.examList">
							<div class="exam-deman" v-if="exam.demand" v-html="exam.demand"></div>
							<div class="exam">
								<div style="margin-right: 10px;"
									v-if="exam.examType == '1' || exam.examType == '2' || exam.examType == '4'">
									{{exam.examNo }}
								</div>
								<div v-html="exam.contentText"></div>
							</div>
							<div class="option" v-if="exam.examType == 1">
								<el-radio-group v-model="state.examAnswerList[exam.examNo-1].userAnswer">
									<el-radio :label="option.labels" v-for="option in exam.examOptionList"
										:key="option.id">{{option.content}}
									</el-radio>
								</el-radio-group>
							</div>
							<div class="option" v-if="exam.examType == 2">
								<template v-for="(v,k) in exam.examOptionList" :key="k">
									<div class="selet_option">
										<input type="checkbox"
											:disabled="state.options[exam.examNo+'length1']==0 && !state.options[exam.examNo][v.labels]"
											v-model="state.options[exam.examNo][v.labels]"
											@change="optionsChange(exam.examNo,v.labels)" />
										<span>{{v.labels}}.</span>
										{{v.content}}
									</div>
								</template>
							</div>
							<div class="option" v-if="exam.examType == 4">
								<el-radio-group v-model="state.examAnswerList[exam.examNo-1].userAnswer">
									<el-radio :label="option.labels" v-for="(option,index) in state.judgeOptions"
										:key="index">{{option.content}}
									</el-radio>
								</el-radio-group>
							</div>
						</template>
					</div>
				</div>
			</div>
		</template>
		<div class="footer">
			<div class="footer-box" v-for="section in state.sectionList" :key="section.id"
				@click="selectSection(section.id)">
				<div class="answer-box" v-if="section.id == state.sectionIndex">
					<div class="name" :class="section.id == state.sectionIndex?'active':''">{{section.sectionName}}
					</div>
					<div class="examNo" v-for="answer in section.examAnswerList">
						<el-tag :type="answer.userAnswer?'success':''">{{answer.examNo}}</el-tag>
					</div>
				</div>
				<div class="answer-box" v-else>
					<div class="name">{{section.sectionName}}</div>
					<div class="examNo">
						{{getAnswerSize(section)}} of {{section.examAnswerList.length}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router';
	import {
		ElMessage,
		ElMessageBox
	} from "element-plus";

	const {
		proxy
	} = getCurrentInstance()
	const router = useRouter()
	const route = useRoute()

	const state = reactive({
		mockId: '',
		mockPaperList: [],
		paper: {},
		sectionList: [],
		paperId: '',
		sectionIndex: 0,
		examAnswerList: [{
			userAnswer: ''
		}],
		setInter: '',
		options: {},
		judgeOptions: [{
				labels: 'A',
				content: 'TRUE/YES'
			},
			{
				labels: 'B',
				content: 'FALSE/NO'
			},
			{
				labels: 'C',
				content: 'NOT GIVEN'
			}

		]
	})


	onMounted(() => {
		state.mockId = '1737017062859313153'
		// route.query.mockId ||
		state.setInter = setInterval(() => {
			for (let i = 0; i < 50; i++) {
				if (document.getElementById('question' + i) != null) {
					state.examAnswerList[i - 1].userAnswer = document.getElementById('question' + i).value
				}
			}
		}, 1000);
	})


	function submitPaper() {
		if (!localStorage.getItem('token')) {
			ElMessage.warning('请先登录')
			window.open('/#/Login?showType=1', '_blank');
			return;
		}
		ElMessageBox.confirm('真实的机考中，无法提前交卷！\n' +
			'同学正在进行的是模拟考试，为了节省同学的\n' +
			'备考时间，可选择提前交卷?', 'Finish Section', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
			proxy.$http.post('/boot/user/userPaper/add', {
				mockPaperId: state.mockId,
				paperId: state.paperId,
				paperExamList: state.examAnswerList
			}).then(res => {
				if (res.data.success) {

				} else {
					ElMessage.success(res.data.message)
				}
			})
		}).catch(() => {});

	}


	function getAnswerSize(section) {
		let sectionAnswerList = []
		section.examList.forEach((exam) => {
			sectionAnswerList = sectionAnswerList.concat(exam.examAnswerList)
		})
		let size = 0
		state.examAnswerList.forEach((answer) => {
			let result = sectionAnswerList.some(item => {
				if (item.id == answer.id) {
					return true
				}
			})
			if (answer.userAnswer && result) {
				size++
			}
		})
		return size;
	}

	function getImagerUrl(url) {
		return 'http://ielts.tuyaedu.com/boot/sys/common/static/' + url;
	}

	function getMockPaper() {
		// state.mockId = route.query.mockId
		state.mockId = '1737017062859313153'
		proxy.$http.get('/boot/paper/mockPaperItem/list?mockPaperId=' + state.mockId).then(res => {
			if (res.data.success) {
				state.mockPaperList = res.data.result.record;
			}
		})
	}

	const optionsChange = (key1, key2) => {
		let num = 0
		let examNoStart = key1.substring(0, key1.indexOf('-'))
		let examNoEnd = key1.substring(key1.indexOf('-') + 1, key1.length)
		for (let i = examNoStart; i <= examNoEnd; i++) {
			state.examAnswerList[i - 1].userAnswer = ''
		}
		for (let item in state.options[key1]) {
			if (state.options[key1][item]) {
				state.examAnswerList[examNoStart - 1 + num].userAnswer = item
				num++
			}
		}
		setTimeout(function() {
			state.options[key1 + 'length1'] = state.options[key1 + 'length'] - num
		}, 100)
	}

	function selectSection(sctionId) {
		state.sectionIndex = sctionId;
	}

	function changInput(examNo, value) {
		console.log(examNo)
	}

	function getPaperById() {
		state.paperId = route.query.paperId || '"1730479031973142529"'
		proxy.$http.get('/boot/api/questions/paper/queryById?id=' + state.paperId).then(res => {
			if (res.data.success) {
				state.paper = res.data.result
				state.sectionList = state.paper.sectionList
				let answerList = []
				state.sectionList.forEach((section, index) => {
					if (index == 0) {
						state.sectionIndex = section.id;
					}
					let examAnswerList = [];
					section.examList.forEach((exam) => {
						if (exam.examType == '2') {
							let examNoStart = exam.examNo.substring(0, exam.examNo.indexOf('-'))
							let examNoEnd = exam.examNo.substring(exam.examNo.indexOf('-') + 1,
								exam.examNo.length)
							let arrLength = examNoEnd - examNoStart + 1
							state.options[exam.examNo] = {
								A: false,
								B: false,
								C: false,
								D: false,
								E: false,
								F: false,
								G: false,
								H: false,
							}
							state.options[exam.examNo + 'length'] = arrLength
							state.options[exam.examNo + 'length1'] = arrLength
						}
						if (exam.examNo.indexOf('-') > 0) {
							let startNum = exam.examNo.substring(0, exam.examNo.indexOf('-'))
							let endNum = exam.examNo.substring(exam.examNo.indexOf('-') + 1)
							for (let i = startNum; i <= endNum; i++) {
								let input_ = i + 'input_' + i
								//用regExp对象处理
								let reg = new RegExp(input_, "g");
								exam.contentText = exam.contentText
									.replace(reg, `<input id="question` + i +
										`"data-answer-id="11844" data-question-num="4" click="changInput('1')" style="text-align: center" type="text" placeholder="` +
										i +
										`" class="answer answer-11844" autocomplete="off" autocomplete="new-password">`
									)
							}
						}

						examAnswerList = examAnswerList.concat(exam.examAnswerList)
					})
					section.examAnswerList = examAnswerList;
					answerList = answerList.concat(examAnswerList);
				})
				state.examAnswerList = answerList;
			}
		})
	}

	getMockPaper();
	getPaperById()
</script>

<style lang="less">
	.mock-content {
		position: relative;

		.header {
			background-color: #ffffff;
			position: sticky;
			top: 0;
			height: 80px;
			z-index: 99;
			padding: 20px;
			width: 100%;

			.left {
				display: flex;
				flex-direction: row;

				.top_left {
					width: 200px;
					height: 39px;
					margin-right: 5px;
				}
			}

			.right {
				.image {
					margin-left: 10px;
					width: 35px;
					height: 35px;
				}
			}
		}

		.section-box {
			height: 100%;
			margin-bottom: 100px;
			line-height: 30px;

			.content-top {
				padding: 10px 20px;
				background-color: #d1e7b645;
			}

			.content-box {
				display: flex;
				flex-direction: row;
				position: relative;
				padding: 10px 20px;

				.left {
					position: absolute;
					left: 0;
					width: calc(15%);
					height: 100%;
					overflow-y: auto;
					overflow-x: auto;
					float: left;
				}

				.resize {
					position: absolute;
					left: 15%;
					top: 0;
					bottom: 0;
					width: 5px;
					cursor: col-resize;
					z-index: 100;
					background-color: transparent;
					border-left: 1px solid #ececec;
				}

				.right {
					position: absolute;
					left: 15%;
					width: 85%;
					height: 100%;
					float: left;
				}

				.exam-deman {
					margin-bottom: 20px;
				}

				.exam {
					display: flex;
					flex-direction: row;
					margin-top: 20px;
					margin-bottom: 10px;
				}

				.option {
					display: flex;
					flex-direction: column;

					.selet_option {
						margin-left: 10px;
						// height: 23px;
						line-height: 32px;
						display: flex;
						align-items: center;
						font-size: 16px;

						input {
							width: 18px;
							height: 18px;
							background: #edeff1;
							border: none;
							border-radius: 2px;
							margin-left: 0;
							--active-inner: #23c4f8;
							outline: none;
						}

						span {
							margin-left: 10px;
							display: block;
							width: 22px;
						}
					}
				}


			}
		}

		input {
			text-align: center;
		}

		.footer {
			position: fixed;
			bottom: 0;
			padding: 20px;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;

			.footer-box {
				cursor: pointer;
				display: flex;
				flex-direction: row;
				width: 100%;
				height: 100%;
				padding: 10px;

				.answer-box {
					width: 100%;
					border: 1px solid #333333;
					padding: 10px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;

					.name {
						text-align: center;
					}

					.examNo {
						margin: 5px;
					}
				}

				.active {
					flex-shrink: 0;
				}
			}


		}
	}

	.el-radio-group {
		display: flex;
		flex-direction: column;
		align-items: start;
	}
</style>